<template>
  <div>
    <A v-if="flag" ref="ARef" @click="AVal = '我是 A（更新）'">{{ AVal }}</A>
    <button @click="flag = true">创建 A 组件</button>
    <button @click="flag = false">销毁 A 组件</button>

    <hr />

    <div ref="DivRef" @click="text = '我是 DIV（更新）'">{{ text }}</div>
  </div>
</template>

<script setup lang="ts">
import {
  getCurrentInstance,
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  // onRenderTracked,
  // onRenderTriggered,
} from "vue";
import A from "./components/A.vue";

let flag = ref(true);
let AVal = ref("我是 A 组件");
let ARef = ref<Element>();

let text = ref("我是 DIV");
let DivRef = ref();

// setup 自身代替了 Vue2 的 beforeCreate 和 created 生命周期
console.log("setup");

console.log("组件自身实例===>", getCurrentInstance());

// 组件挂载前
onBeforeMount(() => {
  console.log("组件挂载前===>", ARef.value);
});

// 组件挂载后
onMounted(() => {
  console.log("组件挂载后===>", ARef.value);
});

// 组件更新前
onBeforeUpdate(() => {
  console.log("组件(自身)数据更新前===>", DivRef.value?.innerHTML);
});

// 组件更新后
onUpdated(() => {
  console.log("组件(自身)数据更新后===>", DivRef.value?.innerHTML);
});

// 组件卸载前
onBeforeUnmount(() => {
  console.log("组件(自身)卸载前===>");
});

// 组件卸载后
onUnmounted(() => {
  console.log("组件(自身)卸载后===>");
});

// 收集依赖时（可以用于调试）
// onRenderTracked((e) => {
//   console.log("收集依赖===>", e);
// });

// 触发依赖时（可以用于调试）
// onRenderTriggered((e) => {
//   console.log("触发依赖===>", e);
// });
</script>
